<template>
	<uv-navbar
	  :fixed="false"
	  @leftClick="$onClickLeft"
	  bgColor="#09b4f1"
	>
		<template v-slot:left>
			<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
		</template>
		<template v-slot:center>
			<text style="color:#ffffff">{{title}}</text>
		</template>
	</uv-navbar>
	<view class="container">
		<view class="pb-2 flex px-5" style="background-color: #09b4f1;">
			<uv-search  placeholder="搜索联系人姓名" v-model="keyword" bgColor="#ffffff" :customStyle="customStyle" :show-action="false" @change="onSearch"></uv-search>
			<uv-icon name="/static/images/screen.png" :size="26" @click="openSearch"></uv-icon>
		</view>
		<view class="bg-white">
			<uv-tabs :list="list" @click="handleSelect" :scrollable="false"></uv-tabs>
		</view> 
		<view class="wrap">
			<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop" @scroll="scroll"  @scrolltolower="reachBottom">
				<view class="page-box">
					<block v-if="dataList.length > 0">
						<view class="client" v-for="(item, index) in dataList" :key="index" @click="onItem(item.id)">
							<view class="item">
								<view class="content">
									<view class="title uv-line-2">{{item.name}}<text @click.stop="call(item.id,item.mobile?item.mobile:item.telephone)" v-if="item.mobile||item.telephone">（<text style="color: #2979ff;">{{item.mobile?item.mobile:item.telephone}}</text> ） </text></view>
									<view class="type">{{item.remark ? item.remark : '自动添加'}}</view>
								</view>
							</view>
						</view>
						 <uv-load-more  :status="listStatus" />
					</block>
					<uv-empty text="暂无数据" v-else  margin-top="100" mode="list"></uv-empty>
				</view>
			</scroll-view>
		</view>
		<view class="floatBtn" @click="addUser">
			<uv-icon name="plus"  size="20" color="#09b4f1"></uv-icon>添加
		</view>
		
		<uv-popup ref="popup" @change="change" mode="top" bgColor="" :customStyle="customStyle2" :overlay="false">
			<view class="p-2">
				<uv-form labelPosition="top" :model="model1" :rules="rules" ref="form" labelWidth="70">
					<uv-form-item label="手机" >
						<uv-input v-model="mobile"  placeholder="请输入手机">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="电话" >
						<uv-input v-model="phone"  placeholder="请输入电话">
						</uv-input>
					</uv-form-item>
					<view class="flex">
						<view class="flex-1">
							<uv-button type="success" :plain="true" text="确定" @click="onSubmit"></uv-button>
						</view>
						<view class="flex-1">
							<uv-button type="error" :plain="true" text="重置" @click="onReset"></uv-button>
						</view>
					</view>
				</uv-form>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
import {
	ref,
	computed
} from 'vue'
import { onLoad,onShow ,onReady,onPageScroll} from '@dcloudio/uni-app'
import {
  getContactsPage
} from '@/api/customer'
import { formatDateTime } from '@/utils/util'
const title = ref('联系人')
const keyword = ref('')
const mobile = ref('')
const phone = ref('')
const oldScrollTop = ref(0)
const scrollTop = ref(-1)
const dataList = ref([])
const dx = ref(0)
const pH = ref(0)
const scrollHeight = ref(0)
const page = ref(1)
const pageSize = ref(10)
const lastPage = ref(false)
const listStatus = ref('loadmore')

const customStyle = computed(() =>{
	return {
		 paddingLeft:'10rpx',
		  paddingRight:'120rpx'
		}
})
const customStyle2 = computed(() =>{
	return {
		 marginTop:(uni.getSystemInfoSync().statusBarHeight+40)+'px',
	     backgroundColor:'#ffffff'
		  //top:'100px'
		}
})
const relation = ref('my')
const list = ref( 
	[{
		name: '我的联系人',
		value: 'my'
	}, {
		name: '下属联系人',
		value: 'sub'
	}]
)


onReady(()=>{
	uni.getSystemInfo({ 
		success(res) {
			pH.value = res.windowHeight 
			let scrollH = uni.createSelectorQuery().select(".sv")
			scrollH.boundingClientRect(data=>{
				let pH0 = pH.value
				scrollHeight.value = pH0 - data.top 
			}).exec()
		}
	})
})

onLoad((e) => {
	getList();
})

// 页面数据
const getList = async(isNextPage,pages) => {
	let data = await getContactsPage({
		pageNo: page.value,
		pageSize: pageSize.value,
		relation: relation.value,
		name:keyword.value,
		mobile:mobile.value,
		phone: phone.value,
	})
	// 不够一页
	if (data.list.length < 10) {
		listStatus.value = 'nomore'
	}
	// 最后一页
	if(data.list.length == 0) {
		lastPage.value = true
	} 
	// 第二页开始
	if(isNextPage) {
		dataList.value = dataList.value.concat(data.list)
		return 
	}
	dataList.value = data.list
}
const handleSelect = (key) => {
  relation.value = key.value
  getList()
}

const popup = ref()

const openSearch = () => {
	popup.value.open()
}
// scroll 滚动记录
const scroll = (e) => {
	oldScrollTop.value = e.detail.scrollTop; // 必要
}
// 滚动到底部
const reachBottom = () => {
	if(lastPage.value || listStatus.value == 'loading') return ;
	if (!lastPage.value) {
		listStatus.value = 'loading';
		setTimeout(() => {
			listStatus.value = 'loadmore'
			getList(true,++page.value)
		}, 500)	
	}

}
// 点击搜索
const onSearch = () => {
	 page.value = 1
	 lastPage.value= false
	 getList()
}

const onReset = () => {
	mobile.value= ''
	phone.value = ''
}
const onSubmit = () => {
	page.value = 1
	lastPage.value= false
	getList()
	popup.value.close()
}

// 查看详情
const onItem = (id) => {
	uni.navigateTo({
			url: '/pages/components/pages/contacts/detail?id=' + id
	})
	
}

// 打电话
const call = (id,phone) => {
 if(phone.indexOf("*") == -1){
		uni.makePhoneCall({phoneNumber:phone});
	}
}

// 添加联系人
const addUser = () => {
	uni.navigateTo({
		url: '/pages/components/pages/contacts/addPerson'
	})
}



	
</script>

<style lang="scss" scoped>
.container {
	background-color: #F7F7F7;
	min-height: 100vh;
}
.page-box {
	padding: 20rpx 20rpx 45rpx;
}
.client {
	width: 710rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.item {
		display: flex;
		align-items: center;
		.content {
			flex: 1;
			.title {
				font-size: 30rpx;
				font-weight: 600;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $uv-tips-color;
			}
		}
		.right {
			margin-left: 10rpx;
			text-align: right;
			.dial {
				color: #2979ff;
				font-size: 14px;
				border-bottom: 1px solid #2979ff;
				padding-bottom: 0px;
			}
		}
	}


}
.wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}


.floatBtn {
	font-size: 23rpx;
	bottom: 100px;
	right: 20px;
	border-radius: 5000px;
	z-index: 9;
	opacity: 1;
	width: 130rpx;
	height: 130rpx;
	position: fixed;
	display: flex;
	flex-direction: row;
	flex-direction: column;
	justify-content: center;
	background-color: #fff;
	color: #606266;
	align-items: center;
	transition: opacity 0.4s;
	border: 1px solid #dcdfe6;
}


</style>
